<template>
  <div class="index">
    <div class="main">
      <div class="child1">
        <el-row>
          <div>
            功能:
            <el-tag>文件协作功能</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
            文件名:
            <el-tag type="success">{{ name }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
            协作创建时间:
            <el-tag type="warning">{{ createTime }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
            <br>
            <br>
            当前文件版本:
            <el-tag type="warning">{{ fileVersion }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
            当前页面用户:
            <el-tag type="danger">{{ pageUser }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
            当前编辑锁定用户:
            <el-tag type="danger">{{ editUser }}</el-tag>&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div class="child2">
        <el-input
          type="textarea"
          :rows="17"
          v-model="text"
          @blur.native="inputBlur()"
          style="  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
        >
        </el-input>
      </div>
    </div>

    <div class="rightmain">
      <div>
        <div>
          <br>
          <img class="iconimg" src="@/icon.jpg">
        </div>
        <br>
        分享者:
        <el-tag type="">{{ createBy }}</el-tag>&nbsp;
      </div>
    </div>
  </div>
</template>
<script>
import {fileCooperationForEdit, fileCooperationForSave, info, userinfo, valueGet} from "@/api/filesys/cooperation";

export default {
  data() {
    return {
      createBy: "",
      id: "",
      filePath: "",
      fileSize: "",
      md5: "",
      createTime: "",
      name: "",
      sharingPath: "",
      fileVersion: "",
      text: undefined,
      editUser: "等待获取",
      pageUser: "等待获取",
    }
  },
  created() {
    this.$prompt('请输入文件协作验证码', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(({value}) => {
      let parameters = {};
      parameters.verificationCode = value
      console.log(value)
      parameters.sharingPath = this.$route.params[0]
      // vue从路径中获取参数 此处参数名为id
      info(parameters).then(res => {
        console.log(res.data.data.id == -1)
        if (res.data.size == 74 || res.data.data.id == -1 ||!parameters.verificationCode) {
          this.$message({
            type: 'error',
            message: '验证码错误'
          });
        } else {
          let filedata = res.data.data
          this.createBy = filedata.createBy
          this.filePath = filedata.filePath
          this.fileSize = filedata.fileSize
          this.fileVersion = filedata.fileVersion
          this.md5 = filedata.md5
          this.createTime = filedata.createTime
          this.sharingPath = filedata.sharingPath
          this.name = filedata.name
          this.id = filedata.id
          valueGet(this.filePath).then(res => {
            this.text = res.data.data
          })
          userinfo(this.id).then(res => {
            this.editUser = res.data.data.editUser
            this.pageUser = res.data.data.pageUser
          })
        }
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消输入'
      });
    });
    // if (this.$route.params && this.$route.params[0]) {
    //   let parameters = {};
    //   parameters.sharingPath = this.$route.params[0]
    //   // vue从路径中获取参数 此处参数名为id
    //   info(parameters).then(res => {
    //     let filedata = res.data.data
    //     this.createBy = filedata.createBy
    //     this.filePath = filedata.filePath
    //     this.fileSize = filedata.fileSize
    //     this.fileVersion = filedata.fileVersion
    //     this.md5 = filedata.md5
    //     this.createTime = filedata.createTime
    //     this.sharingPath = filedata.sharingPath
    //     this.name = filedata.name
    //     this.id = filedata.id
    //     console.log(111)
    //     value(this.filePath).then(res => {
    //       this.text = res.data.data
    //     })
    //     userinfo(this.id).then(res => {
    //       this.editUser = res.data.data.editUser
    //       this.pageUser = res.data.data.pageUser
    //     })
    //   })
    // }
  },
  method: {},
  watch: {
    text(newValue, oldValue) {
      if (oldValue === undefined) {
        return;
      }
      fileCooperationForEdit(this.id).then(res => {
        // this.$message({
        //   message: '文件已经被当前用户锁定，正在编辑',
        //   type: ''
        // });
        userinfo(this.id).then(res => {
          this.editUser = res.data.data.editUser
          this.pageUser = res.data.data.pageUser
        })
        fileCooperationForSave(this.id, this.text, this.fileVersion).then(res => {
          this.$notify({
            title: '成功',
            message: '文件保存成功',
            type: 'success'
          });
          if (this.$route.params && this.$route.params[0]) {
            let parameters = {};
            parameters.sharingPath = this.$route.params[0]
            // vue从路径中获取参数 此处参数名为id
            info(parameters).then(res => {
              let filedata = res.data.data
              this.createBy = filedata.createBy
              this.filePath = filedata.filePath
              this.fileSize = filedata.fileSize
              this.fileVersion = filedata.fileVersion
              this.md5 = filedata.md5
              this.createTime = filedata.createTime
              this.sharingPath = filedata.sharingPath
              this.name = filedata.name
              this.id = filedata.id
              console.log(111)
              value(this.filePath).then(res => {
                this.text = res.data.data
              })
              userinfo(this.id).then(res => {
                this.editUser = res.data.data.editUser
                this.pageUser = res.data.data.pageUser
              })
            })
          }
        })
      })
    }
  }
};
</script>


<style>
.index {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;

}

.main {
  position: absolute;
  top: 20%;
  left: 25%;
  height: 60%;
  width: 40%;
  /*margin: -15% 0 0 -25%;*/
  vertical-align: middle;
  text-align: center;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

.child1 {
  margin: 15px;

}

.child2 {
  height: 72%;
  margin: 15px;
  /*background-color: #f6f9fd;*/
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)*/
}


.rightmain {
  position: absolute;
  top: 20%;
  left: 66%;
  height: 60%;
  width: 10%;
  /*margin: -15% 0 0 -25%;*/
  vertical-align: middle;
  text-align: center;
  background-color: #f3f8ff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}

#app {
  font-size: 12px;
  line-height: 1.5;
  color: #666;
}

.iconimg {
  width: 100px;
  height: 100px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 50px;
}
</style>
